<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="./assets/icon.png">

    <title>Calculator</title>
</head>

<body>
    <div class="calc">
        <div class="screen">
            <div class="history"></div>
            <div class="current">0</div>
        </div>

        <div class="keyboard">
            <button class="button" data-role="percent">%</button>
            <button class="button" data-role="clearEntry">CE</button>
            <button class="button" data-role="clear">C</button>
            <button class="button" data-role="erase">&#8592;</button>
            <button class="button" data-role="reciprocal">1/x</button>
            <button class="button" data-role="square">x&sup2;</button>
            <button class="button" data-role="squareRoot">&Sqrt;x</button>
            <button class="button" data-role="divide" data-value="/">/</button>
            <button class="button" data-role="char" data-value="7">7</button>
            <button class="button" data-role="char" data-value="8">8</button>
            <button class="button" data-role="char" data-value="9">9</button>
            <button class="button" data-role="multiply" data-value="*">*</button>
            <button class="button" data-role="char" data-value="4">4</button>
            <button class="button" data-role="char" data-value="5">5</button>
            <button class="button" data-role="char" data-value="6">6</button>
            <button class="button" data-role="subtract" data-value="-">-</button>
            <button class="button" data-role="char" data-value="1">1</button>
            <button class="button" data-role="char" data-value="2">2</button>
            <button class="button" data-role="char" data-value="3">3</button>
            <button class="button" data-role="add" data-value="+">+</button>
            <button class="button" data-role="invert">+/-</button>
            <button class="button" data-role="char" data-value="0">0</button>
            <button class="button" data-role="char" data-value=".">.</button>
            <button class="button" data-role="execute">=</button>
        </div>
    </div>
</body>
</html>
